<template>
  <div class="container-fluid w-75 mx-auto pt-5">
    <h1 class="mb-4 text-center text-danger">任务列表案例</h1>
    <div class="row align-items-center">
      <!-- 全选 -->
      <div class="col-auto">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value=""
            id="allCheck"
            v-model="allCheckbox"
          />
          <label class="form-check-label" for="allCheck">全选</label>
        </div>
      </div>

      <!-- 输入待办 -->
      <div class="col">
        <input
          class="form-control"
          type="text"
          placeholder="请输入待办事项，按回车添加"
          aria-label="todo input"
          v-model="inputValue"
          @keyup.enter="onAdd"
        />
      </div>
    </div>

    <ul class="list-group mt-4">
      <li
        class="list-group-item d-flex justify-content-between"
        v-for="item in filterList"
        :key="item.id"
      >
        <div class="form-check d-inline-block">
          <input
            class="form-check-input"
            type="checkbox"
            v-model="item.checked"
          />
          <!-- 是否完成的checkbox -->
          <label
            class="form-check-label"
            :class="{ 'text-decoration-line-through': item.checked }"
            for="flexCheckDefault"
          >
            {{ item.text }}
          </label>
        </div>

        <button class="btn-close" @click="onDelete(item.id)"></button>
      </li>
    </ul>

    <div class="d-flex mt-2 justify-content-between align-items-center">
      <span>剩余({{ unDomeNums }})个</span>

      <ul class="nav nav-pills">
        <li class="nav-item" v-for="item in filterTexts" :key="item">
          <button
            class="nav-link"
            :class="{ active: selectText === item }"
            @click="selectText = item"
          >
            {{ item }}
          </button>
        </li>
      </ul>

      <button type="button" class="btn btn-danger" @click="onClear">
        清除已完成({{ DomeNums }})
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      // 判断本地存储是否存储数据
      list: localStorage.getItem('toods315')
        ? JSON.parse(localStorage.getItem('toods315'))
        : [],
      filterTexts: ['全部', '未完成', '已完成'],
      selectText: '全部',
    }
  },
  methods: {
    //添加功能
    onAdd() {
      // 校验输入框的合法性
      if (!this.inputValue) {
        alert('您输入的字段不合法')
        return
      }
      //把输入框的值添加到数组中
      this.list.unshift({
        id: Date.now(),
        text: this.inputValue,
        checked: false,
      })
      //重置表单
      this.inputValue = ''
    },
    // 删除功能
    onDelete(id) {
      // 根据id查找元素对应数组的位置
      const index = this.list.findIndex((v) => v.id === id)
      this.list.splice(index, 1)
    },
    //清空已完成功能 - 筛选 -> 留下未完成
    onClear() {
      this.list = this.list.filter((v) => !v.checked)
    },
  },
  //监听器
  watch: {
    list: {
      //深度监听 对象-数组
      deep: true,
      //处理数据
      handler(newVal) {
        localStorage.setItem('toods315', JSON.stringify(newVal))
      },
    },
  },
  //计算属性
  computed: {
    //全选
    allCheckbox: {
      get() {
        // 当list等长度为 0 时 全选不能被勾上
        return (
          this.list.length &&
          this.list.filter((v) => v.checked).length === this.list.length
        )
      },
      set(checked) {
        // 勾选全部时 - 把全部单任务的状态和全选的状态一致
        this.list.forEach((v) => (v.checked = checked))
      },
    },
    // 筛选
    filterList() {
      if (this.selectText === '全部') {
        return this.list
      } else if (this.selectText === '未完成') {
        return this.list.filter((v) => !v.checked)
      } else if (this.selectText === ' 已完成') {
        return this.list.filter((v) => v.checked)
      } else {
        return []
      }
    },
    //统计未完成
    unDomeNums() {
      return this.list.filter((v) => !v.checked).length
    },
    //统计已完成
    DomeNums() {
      return this.list.filter((v) => v.checked).length
    },
  },
}
</script>

<style></style>
